<template>
  <div class="xiafa_sp page-content center-center"  > <!--v-loading.fullscreen.lock="canSave"-->
    <div style="width: 80%;">
      <div class="title-info text-left">
        [{{name}}]-[{{industry}}] 下发商品原料
      </div>
      <div class="center-center">
        <el-form class="myForm" :model="modelForm" ref="modelForm" label-width="100px" style="width: 100%;">

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label=" " prop="name" :rules="[{ required: true, message: '请输入下发名称', trigger: 'blur' }]">
                <el-input placeholder="请输入下发名称" v-model="modelForm.name" auto-complete="off" :maxlength="20" size="medium" >
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请输入下发名称">
                      <el-button tabIndex="-1">门店名称</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" " prop="storeId" :rules="[{ required: true, message: '请选择下发商品库', trigger: 'change' }]">
                <div class="el-input el-input-group el-input-group--prepend">
                  <el-tooltip style="border-right:0px solid #c0c0c0" placement="top" content="（选择下发商品库）">
                    <div class="el-input-group__prepend">下发商品库</div>
                  </el-tooltip>
                  <el-select v-model="modelForm.storeId" filterable placeholder="请选择下发商品库" size="medium" class="w-100p" @change="changeStore">
                    <el-option
                      v-for="item in storeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      :disabled="item.state && item.state!='NORMAL'"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>


          <!--下发商品 start-->
          <div style="color:#888;text-align: left;padding-left: 100px;padding-bottom: 10px">下发的商品</div>
          <el-row class="text-left" style="margin-bottom: 20px; margin-right: 100px; margin-left: 100px;">
            <el-col :span="24" >
              <div style="padding-left: 10px;height: 70vh;overflow-y: auto;border:1px solid #ccc;padding:5px 10px;">

                <div v-for="i in dishesList" v-if="dishesList.length>0">
                  <div style="border-bottom: 1px solid #f2f2f2;padding-bottom:10px;font-size: 16px;">
                    <el-checkbox :indeterminate="i.isIndeterminate" v-model="i.checkAll" @change="handleCheckAllChange(i)"><span style="font-weight: bold">{{i.name}}</span></el-checkbox></div>
                    <el-checkbox-group  v-model="i.checkboxGroup1" class="text-left" style="padding-top: 10px;margin-bottom: 10px; padding-left: 23px" @change="handleCheckedCitiesChange(i,i.dishess)">
                      <el-checkbox v-for="(j,index) in i.dishess"  :label="j.id" :key="j.id" style="padding-bottom: 4px;padding-top:2px;width:20%;text-align: left;margin:0px;" @change="isDel($event,j,i)">{{j.name}}<div style="clear: both"></div></el-checkbox>
                    </el-checkbox-group>
                </div>
              </div>
            </el-col>
          </el-row>
          <!--下发商品 end-->

          <!--下发原料 start-->
          <div v-if="storeType=='ZC' || storeType=='KC' || storeType=='HB'">
            <div style="color:#888;text-align: left;padding-left: 100px;padding-bottom: 10px">下发的原料</div>
            <el-row class="text-left" style="margin-bottom: 20px; margin-right: 100px; margin-left: 100px;">
              <el-col :span="24" >
                <div style="padding-left: 10px;height: 70vh;overflow-y: auto;border:1px solid #ccc;padding:5px 10px;">
                  <div v-for="i in materialsList" v-if="materialsList.length>0">
                    <div style="border-bottom: 1px solid #f2f2f2;padding-bottom:10px;font-size: 16px;">  <el-checkbox :indeterminate="i.isIndeterminate" v-model="i.checkAll" @change="handleCheckAllChangeMaterial(i)"><span style="font-weight: bold">{{i.name}}</span></el-checkbox></div>
                    <el-checkbox-group  v-model="i.checkboxGroup1" class="text-left" style="padding-top: 10px;margin-bottom: 10px;padding-left: 23px" @change="handleCheckedCitiesChangeMaterial(i,i.materials)">
                      <el-checkbox v-for="(j,index) in i.materials"  :label="j.id" :key="j.id" style="padding-bottom: 4px;padding-top:2px;width:20%;text-align: left;margin:0px;">{{j.name}}<div style="clear: both"></div></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!--下发原料 end-->

          <el-form-item  prop="ganwei"    :rules="[]" v-if="showCostCard" style="margin-bottom: 0 !important;">
            <div class="el-input el-input-group el-input-group--prepend">
              <div class="el-input-group__prepend">是否下发成本卡</div>
              <div style="border:1px solid #ccc;line-height: 30px;padding:0px 10px;min-height: 30px;" class="text-left">
                <el-checkbox v-model="modelForm.costCard">下发成本卡</el-checkbox>
              </div>
            </div>
            <div class="text-left c-1">成本卡下发将会把成本卡中存在的原料和商品信息一起下发</div>
          </el-form-item>

          <div v-if="!isNew" class="text-left c-1" style="margin-left: 100px">未勾选的商品将会在单店中删除</div>

        </el-form>


      </div>
      <div class="text-left" style="margin-left:142px">
        <el-button :disabled="canSave" type="primary" size="medium" @click="submitForm('modelForm')">
          <span v-if="canSave"><i class="el-icon-loading"></i>提交中</span>
          <span v-else>提交</span>
        </el-button>
        <!--<el-button type="primary" @click="submitValid()">提交</el-button>-->
        <el-button  @click="resetForm()">返回</el-button>
      </div>
      <br />
    </div>

    <!--遮罩层 -->
    <div v-if="canSave" class="is_lodding">
      <i class="el-icon-loading"></i>
      <div>正在下发数据，请耐心等待...
      <br />
        <span>已用时：<span id="mytime">{{str}}</span></span>
      </div>
    </div>
    <!--<div v-if="!canSave">
      <div style="position: absolute;left:0; top:0; right:0; bottom: 0; z-index: 2000; opacity: 0.4; background: rgba(0,0,0,.3); overflow: hidden;">
        <div style="margin-top: 30%; text-align: center">商品正在下发中，请耐心等待</div>
      </div>
    </div>-->
  </div>
</template>
<script>
  import { Loading } from 'element-ui';
    //注意路径
    export default{
        data(){
            return {
              showCostCard:true,
              canSave:false,
              modelForm: {},
              selectDistrict:[],
              showDialog: false,
              activityId: "",
              isSave: true,
              downCategeryId: [],
              isUpdate: false,
              treeData:[],
              storeId:'',
//              storeId:window.localStorage.getItem("dishKuId"),
              isDistricts:false,
              defaultProps: {
                children: 'children',
                label: 'label'
              },
              districtId:[],
              districtName:"",
              storeList:[],
              currentStoreId:"",
              dishesList:[],
              checkboxGroup1:[],
              checked:"",
              checkAll: false,
              checkedCities: [],
              isIndeterminate: true,
              selectAllDishes:[],
              checkedKey:[],
              pickerOptions0: {
                disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                }
              },
              editStoreId:"",
              editDishes:[], //编辑还原菜品
              materialsList:[],
              editMaterials:[], //编辑还原原料
              isNew:false,
              storeType:"",
              h:0,//定义时，分，秒，毫秒并初始化为0；
              m:0,
              ms:0,
              s:0,
              time:0,
              str:'',
              mytime:'',
              name:"", //店名
              industry:"" //业态
            };
        },
      components: {

      },
        created(){
            window.this = this;
//          this.time=setInterval(this.timer,50);
         /* const loading = this.$loading({
            lock: true,
            text: '正在下发数据，请耐心等待... ',
            target: document.querySelector('.loadingtext'),
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
*/

          if (this.$route.query.id && this.$route.query.id != '') {
            this.activityId = this.$route.query.id;
            this.isNew = this.$route.query.isNew;
            this.name = this.$route.query.name;
            this.industry=this.$route.query.industry;
          }
          this.initData();

        },
      mounted(){
        let _this=this;
        document.addEventListener("click",function(event){
          var sp = document.getElementById("myPanel");
          if(sp){
            if(!sp.contains(event.target)){            //这句是说如果我们点击到了id为myPanel以外的区域
              _this.isDistricts=false;
            }
          }
        })
      },

        methods: {
          isDel(e,item,dishes){
            if(!e){
              var branchId = '';
              if(this.selectDistrict && this.selectDistrict.length>0){
                branchId = this.selectDistrict[0].id;
              }
              this.$axios.get("dishes/dishesMenus/deleteDishes",{branchId:branchId,dishesId:item.id}).then(data => {
                if(data.status==200){
                  if(!data.content){
                    dishes.checkboxGroup1.push(item.id);
                    this.$alert('该商品在单店已使用，不能删除', '提示', {
                      confirmButtonText: '确定',
                    });
                  }else {

                  }
                }
              })
            }
          },
          changeStore(e){
            if(this.modelForm.storeId){
              var storeId = this.modelForm.storeId;
              var obj = this.storeList.find(function (x) {
                return x.id===storeId;
              });
              if(obj.industry=='SX' || obj.industry=='HB' || obj.industry=='LS'){
                this.showCostCard = false;
                this.modelForm.costCard = true;
              }else {
                this.showCostCard = true;
                this.modelForm.costCard = false;
              }

              this.storeType=obj.industry;


              this.getDishesList(this.modelForm.storeId,this.isUpdate,this.editDishes);
              this.getMaterialList(this.modelForm.storeId,this.isUpdate,this.editMaterials);
              this.getBranchs();
            }
          },

          printNum(){
            event.currentTarget.select();
          },
            //页面第一次进来获取表单需要的数据
            initData(){
              this.districtName = '';
              this.checkedKey=[];
              this.canSave=false;
                if (this.activityId != '') {
                  this.isSave = false;
                  this.isUpdate = true;
                  this.$axios.get("dishes/dishesMenus/" + this.activityId + "/update").then(data => {
                    this.modelForm = data.content.dishesMenu;

                    this.getBranchs();


                    //门店数据还原
                    var tree = data.content.districts;
                    this.newLabel(tree);
                    this.treeData = tree;
                    var branchs=[];
                    for(var i=0;i<data.content.branchs.length;i++){
                      branchs.push(data.content.branchs[i].branchId);
                    }
                    this.selectDistrict=[];
                    this.districtId=[];
                    for(let i=0;i<data.content.branchs.length;i++){
                      this.selectDistrict.push({name:data.content.branchs[i].label,id:data.content.branchs[i].branchId,districtId:data.content.branchs[i].districtId});
                      this.districtId.push(data.content.branchs[i].branchId);
                    }
                    this.districtName="";
                    if(this.selectDistrict.length>0){
                      for(var j=0;j< this.selectDistrict.length;j++){
                        this.districtName +=this.selectDistrict[j].name+",";
                      }
                    }
                    var ids=[];
                    for(var i=0;i<this.selectDistrict.length;i++){
                      ids.push(this.selectDistrict[i].id+"_b");
                    }
                    this.checkedKey=ids;

//                    val.checkboxGroup1 = val.checkAll ? ids : [];
//                    val.isIndeterminate = false;

                    //菜品数据还原
//                    this.editDishes=data.content.dishess;
                    if(data.content.dishesMenu.dishesDetails && data.content.dishesMenu.dishesDetails!=''){
                      this.editDishes = JSON.parse(data.content.dishesMenu.dishesDetails);
                    }else{
                      this.editDishes = [];
                    }
                    if(data.content.dishesMenu.materialDetails && data.content.dishesMenu.materialDetails!=''){
                      this.editMaterials = JSON.parse(data.content.dishesMenu.materialDetails);
                    }else{
                      this.editMaterials = [];
                    }
                    this.editStoreId=this.modelForm.storeId;

                    for(var i=0;i<data.content.storeList.length;i++){
                      data.content.storeList[i].isSelect=false;
                      if(this.modelForm.storeId== data.content.storeList[i].id){
                        data.content.storeList[i].isSelect=true;
                        this.getDishesList(this.modelForm.storeId,this.isUpdate,this.editDishes);
                        this.getMaterialList(this.modelForm.storeId,this.isUpdate,this.editMaterials);
                      }
                      // continue;
                    }
                    this.storeList=data.content.storeList;
                    var storeId = this.modelForm.storeId;
                    var obj = this.storeList.find(function (x) {
                      return x.id===storeId;
                    });
                    if(obj.industry=='SX' || obj.industry=='HB' || obj.industry=='LS'){
                      this.showCostCard = false;
                      this.modelForm.costCard = true;
                    }else {
                      this.showCostCard = true;
                      this.modelForm.costCard = false;
                    }
                    this.storeType=obj.industry;

                  });
                } else {
                  this.isSave = true;
                  this.isUpdate=false;
                  this.$axios.get("dishes/dishesMenus/create").then(data => {
                    data.content.dishesMenu.effectiveTime=this.moment().format("YYYY-MM-DD");
                    this.modelForm = data.content.dishesMenu;
                    var tree = data.content.districts;
                    this.newLabel(tree);
                    this.treeData = tree;
                    for(var i=0;i<data.content.storeList.length;i++){
                      data.content.storeList[i].isSelect=false;
                    }
                    if( data.content.storeList.length>0){
//                      data.content.storeList[0].isSelect=true;
//                      this.getDishesList(data.content.storeList[0].id);
//                      this.modelForm.storeId=data.content.storeList[0].id;
                    }
//                    console.log(data.content.storeList);
                    this.storeList=data.content.storeList;
                  });
                }


            },

          goChose(){
            this.isDistricts=!this.isDistricts;
//            console.log(this.isUpdate);
            // if(this.isUpdate){
            //
            //   console.log(this.checkedKey);
            // }
          },
          handleCheckAllChange(val) {
            var ids = [];
            if (val) {
              for (var i = 0; i <val.dishess.length; i++) {
                ids.push(val.dishess[i].id);
              }
            }
            val.checkboxGroup1 = val.checkAll ? ids : [];
            val.isIndeterminate = false;
          },
          handleCheckAllChangeMaterial(val) {
            var ids = [];
            if (val) {
              for (var i = 0; i <val.materials.length; i++) {
                ids.push(val.materials[i].id);
              }
            }
            val.checkboxGroup1 = val.checkAll ? ids : [];
            val.isIndeterminate = false;
          },
          handleCheckedCitiesChange(all,item) {
            let checkedCount = all.checkboxGroup1.length;
            all.checkAll = checkedCount === item.length;
            all.isIndeterminate = checkedCount > 0 && checkedCount < item.length;
          },
          handleCheckedCitiesChangeMaterial(all,item) {
            let checkedCount = all.checkboxGroup1.length;
            all.checkAll = checkedCount === item.length;
            all.isIndeterminate = checkedCount > 0 && checkedCount < item.length;
          },
          /**
           * 获取商品信息
           * @param id 菜品库id
           * @param flag 是否编辑
           * @param dishess 编辑数据选中还原 菜品ids:{1,2,3}
           */
          getDishesList(id,flag,dishess){
            console.log(">>>>>>>>>>>nnnnnnnn");
            console.log(this.selectDistrict);

            this.dishesList=[];
            var branchId = '';
            if(this.selectDistrict && this.selectDistrict.length>0){
              branchId = this.selectDistrict[0].id;
            }
            this.$axios.get("dishes/dishesStores/getDishes?storeId="+id+"&isNew="+this.isNew+"&branchId="+branchId).then(res=>{
              if(res.success){
                for(var i=0;i<res.content.length;i++){
                  res.content[i].checkAll=false;
                  res.content[i].checkboxGroup1=[];
                  res.content[i].isIndeterminate=false;
                }
//                console.log(">>>>>>>>>>>>>>::::");
//                console.log(dishess);
                this.dishesList=res.content;

                if(flag==true){   //数据还原
                  if(id==this.editStoreId){
                    for(var j=0;j<dishess.length;j++){
                      for(var i=0;i<this.dishesList.length;i++){
                        for(var n=0;n<this.dishesList[i].dishess.length;n++){
                          if(dishess[j]==this.dishesList[i].dishess[n].id){
                            this.dishesList[i].checkboxGroup1.push(dishess[j]);
                          }
                        }
                      }
                    }
                    if(this.dishesList && this.dishesList.length>0){
                      for(var i=0;i<this.dishesList.length;i++){
                        let checkedCount = this.dishesList[i].checkboxGroup1.length;
                        this.dishesList[i].checkAll = checkedCount === this.dishesList[i].dishess.length;
                        this.dishesList[i].isIndeterminate = checkedCount > 0 && checkedCount < this.dishesList[i].dishess.length;
                      }
                    }
                  }
                }
              }
            },res=>{})
          },

          getMaterialList(id,flag,materials){
            this.materialsList = [];
            this.$axios.get("materials/materials/getMaterialByStoreId?storeId="+id).then(res=>{
              if(res.success){
                for(var i=0;i<res.content.length;i++){
                  res.content[i].checkAll=false;
                  res.content[i].checkboxGroup1=[];
                  res.content[i].isIndeterminate=false;
                }
                this.materialsList=res.content;
                if(flag==true){   //数据还原
                  if(id==this.editStoreId){
                    for(var j=0;j<materials.length;j++){
                      for(var i=0;i<this.materialsList.length;i++){
                        for(var n=0;n<this.materialsList[i].materials.length;n++){
                          if(materials[j]==this.materialsList[i].materials[n].id){
                            this.materialsList[i].checkboxGroup1.push(materials[j]);
                          }
                        }
                      }
                    }
                    if(this.materialsList && this.materialsList.length>0){
                      for(var i=0;i<this.materialsList.length;i++){
                        let checkedCount = this.materialsList[i].checkboxGroup1.length;
                        this.materialsList[i].checkAll = checkedCount === this.materialsList[i].materials.length;
                        this.materialsList[i].isIndeterminate = checkedCount > 0 && checkedCount < this.materialsList[i].materials.length;
                      }
                    }
                  }
                }
              }
            },res=>{})
          },
          getBranchs(){
            if(!this.modelForm.storeId){
              return;
            }
            this.treeData=[];
            this.$axios.get("organization/branchs/getBranchs?storeId="+this.modelForm.storeId).then(res=>{
              if(res.success){
                if(res.content){
                  var tree = res.content;
                  this.newLabel(tree);
                  this.treeData = tree;
                }
              }
            },res=>{})
          },


          selectDishes(item){
            for(var i=0;i<this.storeList.length;i++){
              this.storeList[i].isSelect=false;

            }
            item.isSelect=true;
            this.modelForm.storeId=item.id;
//            console.log( this.modelForm.storeId);

            this.getDishesList(item.id,this.isUpdate,this.editDishes);
          },
          getCurrent(){
            this.selectDistrict=[];
            this.districtId=[];
            this.checkedKey=[];
            var getCheck=this.$refs.tree.getCheckedNodes();
            for(let i=0;i<getCheck.length;i++){
              if(getCheck[i].iBranch==true){
                this.selectDistrict.push({name:getCheck[i].name,id:getCheck[i].id});
                this.districtId.push(getCheck[i].id);
              }
            }
            this.districtName="";
            if(this.selectDistrict.length>0){
              for(var j=0;j< this.selectDistrict.length;j++){
                this.districtName +=this.selectDistrict[j].name+",";
                this.checkedKey.push(this.selectDistrict[j].id+"_b")
              }
            }

          },
          relation(newList){
          },
          newLabel(newList) {
            if (newList) {
              for (var i = 0; i < newList.length; i++) {
//                console.log(newList[i].iBranch);
                if(newList[i].iBranch){
                  newList[i].value = newList[i].id + "_b";
                }else {
                  newList[i].value = newList[i].id + "";
                }
                newList[i].label = newList[i].name;
                if (!newList[i].children || newList[i].children.length == 0) {
                  newList[i].children = null;
                } else {
                  for (var s = 0; s < newList[i].children.length; s++) {
                    if(newList[i].iBranch){
                      newList[i].children[s].value = newList[i].children[s].id + "_b";
                    }else {
                      newList[i].children[s].value = newList[i].children[s].id + "";
                    }
                    newList[i].children[s].label = newList[i].children[s].name;
                    this.newLabel(newList[i].children[s].children);
                  }
                }
              }
            }
          },
          goBack() {
            this.router.go(-1);
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {

                var data={};
//                console.log(this.modelForm);
                data.dishesMenus=this.modelForm;

                if(!this.districtId || (this.districtId && this.districtId.length<=0)){
                  this.$message.error("请选择下发门店");
                  return;
                }

                data.branchs=JSON.stringify(this.districtId);
                //下发商品
                var selectAllDishes=[];
                for(var i=0;i<this.dishesList.length;i++){
                  for(var j=0;j<this.dishesList[i].checkboxGroup1.length;j++){
                    selectAllDishes.push(this.dishesList[i].checkboxGroup1[j]);
                  }
                }

                //下发原料
                var selectAllMaterials=[];
                for(var i=0;i<this.materialsList.length;i++){
                  for(var j=0;j<this.materialsList[i].checkboxGroup1.length;j++){
                    selectAllMaterials.push(this.materialsList[i].checkboxGroup1[j]);
                  }
                }

                if(selectAllDishes.length<=0 && selectAllMaterials.length<=0 && !this.modelForm.costCard){
                  this.$message.error("请至少下发一种数据");
                  return;
                }
                if(this.canSave){
                  return;
                }
                this.canSave=true;
//                data.dishes=JSON.stringify(selectAllDishes);
                if(selectAllDishes.length<=0){
                  data.dishesMenus.dishes = "";
                }else {
                  data.dishesMenus.dishes = JSON.stringify(selectAllDishes);
                }
                if(selectAllMaterials.length<=0){
                  data.dishesMenus.materials = "";
                }else {
                  data.dishesMenus.materials = JSON.stringify(selectAllMaterials);
                }

                data.isNew = this.isNew;


                this.time=setInterval(this.timer,50);

               /* const loading = this.$loading({
                  lock: true,
                  text: '正在下发数据，请耐心等待...',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                });*/

                if (this.isSave) {
                  this.$axios.post("dishes/dishesMenus/create",data,"json").then(data => {
                    this.canSave=false;
                    if (data.status == 200) {
                      this.canSave = false;
//                      loading.close();
                      this.reset();
                      this.$message({
                        message: data.message,
                        type: 'success'
                      });
//                      this.$emit('addSuccess');
//                      this.router.push('/dishesMenu');
                    } else {
                      this.$message.error(data.message);
                    }

                  })

                } else {
                  this.modelForm._method = "PUT";
                  this.$axios.put("dishes/dishesMenus/" + this.activityId + "/update", data,"json").then(data => {
                    this.canSave=false;
                    if (data.status == 200) {
                      this.canSave = false;
//                      loading.close();
                      this.reset();
                      this.$message({
                        message: data.message,
                        type: 'success'
                      });
//                      this.router.push('/dishesMenu');
//                      this.$emit('addSuccess');
                    } else {
                      this.$message.error(data.message);
                    }
                  })
                }
              } else {
                return false;
              }
            });
          },
          resetForm() {
//            this.$emit('close');
//            this.showDialog = false;
            this.router.go(-1);
          },
          handleClose(done) {
            this.$emit('close');
            done();
          },
          isNum(item, key) {
            var r = /^\+?[1-9][0-9]*$/;
            if (!r.test(item[key])) {
              item[key] = "0.00"
            } else {
              item[key] = item[key]
            }
          },
          isDouble(item, key) {
            var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
            if (!isNum.test(item[key])) {
              item[key] = "0.00"
            } else {
              item[key] = item[key]
            }
          },
          timer(){   //定义计时函数
            this.ms=this.ms+50;         //毫秒
            if(this.ms>=1000){
              this.ms=0;
              this.s=this.s+1;         //秒
            }
            if(this.s>=60){
              this.s=0;
              this.m=this.m+1;        //分钟
            }
            if(this.m>=60){
              this.m=0;
              this.h=this.h+1;        //小时
            }
//            this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s)+""/*+this.toDubms(this.ms)+"毫秒"*/;
            this.str =this.toDub(this.h)+"时"+this.toDub(this.m)+"分"+this.toDub(this.s)+"秒"/*+this.toDubms(this.ms)+"毫秒"*/;
//             document.getElementById('mytime').innerHTML=this.h+"时"+this.m+"分"+this.s+"秒";
          },
          toDub(n){  //补0操作
            if(n<10){
              return "0"+n;
            }
            else {
              return ""+n;
            }
          },

          toDubms(n){  //给毫秒补0操作
            if(n<10){
              return "00"+n;
            }
            else {
              return "0"+n;
            }

          },
          reset(){  //重置
            clearInterval(this.time);
            this.h=0;
            this.m=0;
            this.ms=0;
            this.s=0;
            this.str="00:00:00";
          },


        },

    }
</script>
<style scoped>
  .title-info {
    background-color: #f8f8f8;
    border: 1px solid #e4e4e4;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
    text-align: left;
  }
  .is_lodding{
    position: fixed;
    z-index: 2000;
    background-color: hsla(0,0%,100%,.5);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    padding-top: 20%;
    border:1px solid #0062cc;
    color: #fff;
    /*height:60vh;*/
  }
</style>
